<template>
  <div class="artical">
    <Top title="帖子详情" iconShow="1"></Top>
    <div class="artical-content">
      <p class="artical-content-title">{{content.title}}</p>
      <p class="artical-content-nav">
        <span class="artical-content-nav-img">
          <img :src="content.bwImg||'static/img/user.png'" alt="贷款">
        </span>
        <span class="artical-content-nav-name">{{content.nickname}}</span>
        <span class="artical-content-nav-time">{{content.cTime}}</span>
        <span class="artical-content-nav-view">{{content.readscount}}</span>
      </p>
      <div class="artical-content-word">
        <div v-if="content.imgUrl" class="artical-content-word-img">
          <img :src="content.imgUrl" alt="头像"> 
        </div>
        <div v-else class="artical-content-word-img">
          <img :src="item" alt="" v-for="(item,index) in content.commentUrl" :key="index">
        </div>
        <div class="artical-content-word-text" v-for="(item,index) in content.content" :key="index">{{item}}</div>
      </div>
      <ul class="opare-group">
        <li v-if="isPraise" class="opare-group-zaned">{{content.DianZCount}}</li>
        <li v-else  @click="praise" class="opare-group-zan">{{content.DianZCount}}</li>
        <li v-if="isCollect" class="opare-group-shoued">{{content.ShouCangCount}}</li>
        <li v-else  @click="collect" class="opare-group-shou">{{content.ShouCangCount}}</li>
        <li @click="goComment" class="opare-group-ping">{{content.commentnum}}</li>
      </ul>

    </div>
    <!-- <div class="artical-bottom">
      <input type="text" >
      <mt-button type="primary" >
        发送
      </mt-button>
    </div> -->
    <div class="artical-assess">
      <div class="artical-assess-title">
        <span>热门评论</span>   
        <!-- <div @click="goComment" class="comment"><i class="iconfont icon-pinglun"></i>去评论</div> -->
      </div>
      <div v-if="commentList.length<=0" style="line-height:30px;font-size:13px;margin-left:0;padding-left:12px;width:100%;box-sizing:border-box;">目前还没有任何评论哦，快去评论吧！</div>
      <div v-else class="artical-assess-item" v-for="(item,index) in commentList" :key="index">
        <!-- TUDO -->
        <nav>
          <img :src="item.commentHeadImg||'static/img/user.png'" class="artical-assess-item-img fl" alt="头像">
          <span>{{item.nickname ||item.name}}</span>
          <span class="artical-assess-item-date fl">{{item.PinglunTime|formatDate}}</span>
        </nav>
        <p class="artical-assess-item-text">{{item.content}}</p>
      </div>
      <div class="artical-assess-more" @click="goComment">查看更多跟帖</div>
    </div>
  </div>
</template>
<script>
import Top from "../../../components/Header.vue";
import { cookie, dateFormat } from "vux";
import { MessageBox } from "mint-ui";
export default {
  name: "artical",
  components: { Top },
  data() {
    return {
      content: {},
      commentList: [],
      isCollect: false,
      isPraise: false
    };
  },
  filters: {
    formatDate(val) {
      return dateFormat(val, "YYYY-MM-DD HH:mm");
    }
  },
  mounted() {
    let vm = this;
    var id = this.$route.query.id;
    this.id = id;
    // 资讯文章内容接口
    this.$http
      .post("/loansupermarket-app/post/getPost", { pid: id })
      .then(response => {
        var resBody = response.body;
        if (resBody.code == "000") {
          this.content = resBody.data.postInfo;
          this.content.cTime = dateFormat(
            this.content.cTime,
            "YYYY-MM-DD HH:mm"
          );
          this.content.content = this.content.content.split("\n");
          this.commentList = resBody.data.commentList;
          document.setTitle(this.content.title + "-水珠钱包");
          // 是否点赞接口
          if (resBody.data.favor == 1) {
            vm.isPraise = true;
          } else {
            vm.isPraise = false;
          }
          // 是否收藏接口
          if (resBody.data.collect == 1) {
            vm.isCollect = true;
          } else {
            vm.isCollect = false;
          }
        } else {
          MessageBox.alert(resBody.mesg);
        }
      });
    // 热门评论接口
  },
  methods: {
    goComment() {
      var id = this.$route.query.id;
      this.$router.push({
        path: "/main/mine/myfavorite/assess",
        query: { id: id }
      });
    },
    // 点赞
    praise() {
      let messageId = this.id;
      this.$http
        .post("/loansupermarket-app/favor/insertInformationFavor", {
          token: cookie.get("token"),
          visitType: 2,
          informationId: messageId
        })
        .then(function(response) {
          var resBody = response.body,
            { code, data } = resBody;
          if (code == "000") {
            this.isPraise = true;
            this.content.DianZCount = data;
          } else {
            MessageBox.alert(resBody.mesg);
          }
        });
    },
    // 收藏
    collect() {
      let messageId = this.id,
        token = cookie.get("token");
      this.$http
        .post("/loansupermarket-app/collect/insertInformationVisit", {
          token,
          visitType: 2,
          informationId: messageId
        })
        .then(function(response) {
          var resBody = response.body,
            { code, data } = resBody;
          if (code == "000") {
            this.isCollect = true;
            this.content.ShouCangCount = data;
          } else if (code == "444") {
            this.$router.push({ path: "/login", query: { history: 1 } });
          } else {
            MessageBox.alert(resBody.mesg);
          }
        });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../../scss/variable/base.scss";
.opare-group {
  @include flexContainer;
  justify-content: flex-end;
  font-size: 0.35rem;
  color: $iconColor;
  margin-top: .2rem;
  li {
    min-height: 0.8rem;
    @include flexItem;
    background-size: 0.6rem;
    text-indent: 0.7rem;
  }
  @mixin operabg($url) {
    background: url($url) no-repeat 0 -3px;
  }
  &-zan {
    @include operabg("../../../assets/icon/dianzan.png");
  }
  &-zaned {
    @include operabg("../../../assets/icon/yidianzan.png");
  }
  &-shou {
    @include operabg("../../../assets/icon/guanzhu.png");
  }
  &-shoued {
    @include operabg("../../../assets/icon/yiguanzhu.png");
  }
  &-ping {
    @include operabg("../../../assets/icon/pinglun.png");
  }
}
.artical {
  margin-top: 1.2rem;
  text-align: left;
  &-content {
    box-sizing: border-box;
    padding: 0 0.4rem;
    background: #fff;
    padding-bottom: 0.3rem;
    &-title {
      font-size: 0.45rem;
      line-height: 0.8rem;
    }
    &-word {
      font-size: 0.35rem;
      margin-top: 0.35rem;
      color: #5d5d5d;
      line-height: 0.58rem;
      &-img {
        width: 100%;
        img {
          width: 100%;
          margin: auto;
        }
      }
      &-text {
      }
    }
    &-nav {
      $wh: 0.7rem;
      margin-top: 0.5rem;
      @include flexContainer;
      justify-content: start;
      color: $iconColor;
      span {
        @include flexItem;
      }
      &-img {
        img {
          width: $wh;
          height: $wh;
          border-radius: 50%;
        }
      }
      &-name {
        @include textAlign($wh);
        margin-right: 0.2rem;
        color: $navColor;
        text-indent: 0.2rem;
      }
      &-time {
        @include textAlign($wh);
        margin-right: 0.2rem;
      }
      &-view {
        @include textAlign($wh);
        background: url("../../../assets/icon/liulanliang@2x.png")
          no-repeat 0 0.15rem;
        background-size: 0.4rem;
        text-indent: 0.5rem;
      }
      // span:nth-of-type(1){
      //   color:#000;
      //   padding-right: 0.2rem;
      //   height: 0.35rem;
      //   line-height: 0.35rem;
      //   display: inline-block;
      //   border-right: 1px solid $lightDark;
      // }
      // span:nth-of-type(2){
      //   margin-left: 0.1rem;
      // }
      font-size: 0.35rem;
    }
  }
  &-assess {
    width: 100%;
    background: #fff;
    margin-top: 0.3rem;
    &-title {
      box-sizing: border-box;
      width: 100%;
      height: 1.2rem;
      line-height: 1.2rem;
      border-bottom: 1px solid $borderColor;
      box-sizing: border-box;
      padding: 0 0.4rem;
      span {
        border-left: 2px solid $primaryColor;
        padding-left: 0.2rem;
      }
      .comment {
        float: right;
        .iconfont {
          vertical-align: -5%;
        }
      }
    }
    &-item {
      $itemh: 0.6rem;
      padding-bottom: 0.2rem;
      width: calc(100% - 0.4rem);
      // height: 1.7rem;
      margin-left: 0.4rem;
      border-bottom: 1px solid $borderColor;
      nav {
        padding: 0.2rem 0;
        span {
          display: inline-block;
          line-height: $itemh;
          vertical-align: middle;
          font-size: 0.3rem;
          color: #686868;
          text-indent: 0.2rem;
        }
        img {
          width: $itemh;
          height: $itemh;
          border-radius: 50%;
          border: none;
          overflow: hidden;
        }
      }
      &-text {
        clear: both;
        font-size: 0.35rem;
        word-wrap: break-word;
      }
      &-date {
        float: right;
        margin-right: 0.1rem;
      }
    }
    &-more {
      height: 1.14rem;
      line-height: 1.14rem;
      color: $primaryColor;
      text-align: center;
      font-size: 0.38rem;
    }
  }
  // &-bottom{
  //   width: 100%;
  //   // height: 1.33rem;
  //   position: fixed;
  //   bottom: 0;
  //   left:0;
  //   display: flex;
  //   box-sizing: border-box;
  //   background: #fff;
  //   padding: 0.22rem 0.4rem;
  //   box-shadow: 0px 6px 6px rgba(255,255,255,0.5);
  //   input{
  //     width: 6.91rem;
  //     border: 1px solid $borderColor;
  //     height: 0.86rem;
  //     outline: none;
  //     border-radius: 0.12rem;
  //   }
  //   .mint-button{
  //     width: 2.03rem;
  //     height: 0.85rem;
  //     margin-left: 0.26rem;
  //   }
  // }
}
</style>


